<template>
  <div ref="nodeChartContent" class="chart-content">
    <div v-if="chartDataEmpty" class="operator-chart-empty">
      <img alt="" src="@/assets/view/empty2.png" />
      暂无图表数据
    </div>
    <template v-else>
      <div class="chart-content-item">
        <div :id="`line-chart-id-0`" class="time-chart-item"></div>
      </div>
      <div class="chart-content-item">
        <div :id="`line-chart-id-1`" class="time-chart-item"></div>
      </div>
      <div class="chart-content-item">
        <div :id="`line-chart-id-2`" class="time-chart-item"></div>
      </div>
      <div class="chart-content-item">
        <div :id="`line-chart-id-3`" class="time-chart-item"></div>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
/**
 * 经济类算子节点 - 时间序列分解图表
 */
import { Component, Vue, Watch } from 'vue-property-decorator'
import DataStore from '@/store/modules/dataview'
import { LineChart } from '@zjlabvis/vis-charts'

@Component({
  components: {},
})
export default class TimeSeriesDecompositionChart extends Vue {
  private chartDatas: any = {} // 四张图表数据

  public chartDataEmpty: boolean = false
  public compInstance0: any = ''
  public compInstance1: any = ''
  public compInstance2: any = ''
  public compInstance3: any = ''

  // 图表数据
  public get getQueryDataVis() {
    return DataStore.getQueryDataVis || {}
  }

  public getCommonConfig(chart: any) {
    const config: any = {
      title: chart.title,
      titleIsShow: true,
      value: chart.data,
      labelKey: chart.x,
      labelIsShow: false,
      labelTextMaxlength: 4,
      valueKey: chart.title,
      xAxisAttribute: chart.x,
      yAxisAttribute: chart.title,
      xAxisGridIsShow: false,
      xAxisFontSize: 12,
    }
    return config
  }

  @Watch('getQueryDataVis', { deep: true })
  private watchChartResult() {
    if (!this.chartDataEmpty) {
      this.compInstanceDestroy()
    }
    if (this.getQueryDataVis.head) {
      this.chartDataEmpty = false
      this.$nextTick(() => {
        this.init()
      })
    } else {
      this.chartDataEmpty = true
      this.compInstance0 = ''
      this.compInstance1 = ''
      this.compInstance2 = ''
      this.compInstance3 = ''
    }
  }

  public compInstanceDestroy() {
    if (this.compInstance0) {
      this.compInstance0.destroy()
    }
    if (this.compInstance1) {
      this.compInstance1.destroy()
    }
    if (this.compInstance2) {
      this.compInstance2.destroy()
    }
    if (this.compInstance3) {
      this.compInstance3.destroy()
    }
  }

  public async init() {
    const { head } = this.getQueryDataVis
    this.chartDataEmpty = head.length === 0
    if (head.length > 0) {
      this.chartDatas = {}
      head.forEach((chart: any) => {
        const chartData: any[] = []
        this.getQueryDataVis[chart.name].forEach((element: any) => {
          const item: any = {
            x: `${element[0]}`,
            [chart.name]: element[1],
          }
          chartData.push(item)
        })
        // title 和 y 轴相同
        this.$set(this.chartDatas, chart.name, {
          title: chart.name,
          x: 'x',
          data: chartData,
        })
      })
    }
    Object.keys(this.chartDatas).forEach((item: any, index: number) => {
      this.$set(
        this,
        `compInstance${index}`,
        new LineChart(
          `line-chart-id-${index}`,
          this.getCommonConfig(this.chartDatas[item])
        )
      )
    })
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/scroll-bar';

.chart-header {
  display: flex;
  height: 38px;
  justify-content: space-between;
  line-height: 38px;
  width: 100%;
}

.chart-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;

  .chart-content-item {
    background: #fff;
    margin-bottom: 20px;
    padding: 8px 20px;
    width: calc(50% - 10px);

    .time-chart-item {
      height: 380px;
    }
  }

  .operator-chart-empty {
    align-items: center;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 20px;
    width: 100%;
  }
}
</style>
